![POP-IMAGE](https://jul10l1r4.github.io/POP-image/logo.jpeg "POP-IMAGE")
# Guia POP :metal:
Um manual de instruções para as funções contidas no arquivo `POP-IMAGE`, falando a funcionalidade de cada e como você pode personalizar para seu próprio uso.

# Função `vai( url, descrição)`
Essa função é a responsável por fazer todo um processo de encontrar um elemento, alterar o `src` de uma imagem (que até então está sem existir), pôr uma legenda abaixo da imagem fazendo um processo parecido com o da imagem, e exibir os elementos carregados.

## Usando 
 Para a utilização é necessário você criar uma pequena estrutura, como preferir... e alterar o **css** para mostrar como preferir, caso não queira montar uma estrutura como essa, você pode importar uma folha de estilo do [Texto-formatação](https://jul10l1r4.github.io/Texto-farmatacao/ "Uma folha de estilo que formata o texto como quiser") que é a [album.css](https://jul10l1r4.github.io/Texto-farmatacao/album.css "Integração de um box para visualização de imagens").
 
## Performance :beer:
 Note que os seletores do arquivo JS correspondente a essa função usa a função `document.getElementById()` que é o mais performático entre todos os outros seletores.
# Função `go()` :metal:
 É a função responsável por navegação single-page (aquela que você clica em um ligar e ao invés de ser redirecionado você apenas tem em sua tela uma rolagem suave).
 
## Usando 
 Para a utulização basta pôr um **atributo** em qualquer que seja o objeto, imagem, texto, âncora, botão, entre outras, basta adicionar o atributo com o evento desejado e disparar a função `go()` passando como argumento o `id` de onde deseja a rolagem. Exemplo:
 ```HTML
     <img src="https://jul10l1r4.github.io/POP-image/logo.jpeg" alt="POP image" onclick="go( `#content` )"/>
 ```
 > Criei uma imagem com o atributo **alt** que é realmente muito necessário e com um evento que desparará a função `go`
 
# Botão "de volta ao topo" :top:
 Como o nome bem descreve é o botão responsável por ser exibido assim que o usuário desce o necessário para que não tenha trabalho de voltar ao topo.
 
## Usando :fist:
 Para usar basta criar algo: `div`, `a`, `p`. (pensando na semântica serial ideal para isso usar `a`) Acrescente um atributo classe com o nome de `tutop` e um evento que chame a função `up()` sem passar nenhum argumento, pois não será usado (uma vez que o local que deseja ir é ao topo  ༼⍢༽ ). Exemplo:
 ```HTML
 <a class="tutop" onclick="up()">
     <img src="https://jul10l1r4.github.io/HTTP_-_Resposta/img/backtotop.png" alt="Voltar ao topo" title="Topo"/>
 </a>
 ``` 
 E apenas ponha uma imagem, ou um emoticom, como quiser que seja relacionado a voltar ao topo, a estilização dele como todos os códigos, podem ser usado e alterado conforme você queira. 
 
 Caso você queira utilizar uma folha de estilo para facilitar essa utilização usando o Texto-formatacao o arquivo [totop.css](https://jul10l1r4.github.io/Texto-farmatacao/album.css) e nela terá uma formatação já para o botão.
# Dica
 Caso você seja a pessoa que prefere a utilização das folhas de estilo e de todo o JS, e não tenha tempo para dá uma olhada no código, indico que pegue todo os códigos que você exportaria e ponha em apenas um arquivo, APENAS O QUE VOCÊ VAI USAR, pois o carregamento de dados influencia no carregamento do layout da sua página, e assim ela ficará singularmente mais performática.
 
# Licença
## Colabore :heart:

Você pode ajudar neste projeto, dê um `fork` nele aí, será uma honra ter sua presença para editar meus códigos e faze-los melhor.

## Esse projeto é livre sob liceça GNU GPL-3 🐏
Use e abuse, cite-me e estará tudo certo :cat:. Leia sobre a licença [GNU GPL-3](https://www.gnu.org/licenses/gpl-3.0-standalone.html)

 
 